<template>
  <a-card :bordered="false">
    <a-col :md="4">
      <div class="antAdd">
        <span @click="handleReset">+</span>
        <span @click="handleDe">-</span>
      </div>
      <a-tree show-line @select="onSelect" class="tree" :selectedKeys="selectedKeys">
        <a-icon slot="icon" type="carry-out" />
        <a-tree-node v-for="item in treeData" :key="item.id">
          <a-icon slot="icon" type="carry-out" />
          <span slot="title">{{item.mingCheng}}</span>
          <a-tree-node v-for="items in item.childList" :key="items.id">
            <a-icon slot="icon" type="carry-out" />
            <span slot="title">{{items.mingCheng}}</span>
            <a-tree-node v-for="itemss in items.childList" :key="itemss.id">
              <a-icon slot="icon" type="carry-out" />
              <span slot="title">{{itemss.mingCheng}}</span>
            </a-tree-node>
          </a-tree-node>
        </a-tree-node>
      </a-tree>
    </a-col>
    <a-col :md="20">
      <a-row :gutter="24">
        <a-form :form="form" @submit="handleSubmit">
          <a-col :md="12">
            <a-form-item v-bind="formItemLayout" label="门类名称">
              <a-select
                allowClear
                v-decorator="['mingCheng',{
                  rules: [
                    {
                      required: true,
                      message: '门类名称不能为空',
                    },
                  ],
                }]"
                @change="handleChangeML"
              >
                <a-select-option
                  v-for="item in treeName"
                  :key="item.value"
                  :value="item.value"
                >{{item.text}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item v-bind="formItemLayout" label="门类代码">
              <a-input
                disabled
                placeholder="请输入门类代码"
                v-decorator="['daiMa',{
                  rules: [
                    {
                      required: true,
                      message: '门类代码不能为空',
                    },
                  ],
                }]"
              />
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item v-bind="formItemLayout" label="父级标识">
              <a-tree-select
                :disabled="isF"
                v-decorator="['shangJi']"
                show-search
                style="width: 100%"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                placeholder="请选择父级标识"
                allow-clear
                tree-default-expand-all
                @change="onChangeTree"
              >
                <a-tree-select-node
                  v-for="item in treeData"
                  :key="item.id"
                  :value="item.id"
                  :title="item.mingCheng"
                >
                  <a-tree-select-node
                    v-for="items in item.childList"
                    :key="items.id"
                    :value="items.id"
                    :title="items.mingCheng"
                  >
                    <a-tree-select-node
                      v-for="itemss in items.childList"
                      :key="itemss.id"
                      :value="itemss.id"
                      :title="itemss.mingCheng"
                    />
                  </a-tree-select-node>
                </a-tree-select-node>
              </a-tree-select>
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item v-bind="formItemLayout" label="序号">
              <a-input-number
                style="width: 100%"
                id="inputNumber"
                placeholder="请输入序号"
                v-decorator="['ciXu',{
                  rules: [
                    {
                      required: true,
                      message: '序号不能为空',
                    },
                  ],
                }]"
                :min="1"
              />
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item v-bind="formItemLayout" label="使用状态">
              <a-select
                allowClear
                placeholder="请选择使用状态"
                v-decorator="['zhuangTai',{
                  rules: [
                    {
                      required: true,
                      message: '使用状态不能为空',
                    },
                  ],
                }]"
              >
                <a-select-option :value="0">未启用</a-select-option>
                <a-select-option :value="1">已启用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item v-bind="formItemLayout" label="创建人">
              <j-select-multi-user
                style="width: 100%"
                v-decorator="['createBy',{
                  rules: [
                    {
                      required: true,
                      message: '创建人不能为空',
                    },
                  ],
                }]"
              ></j-select-multi-user>
            </a-form-item>
          </a-col>
          <a-col :md="12">
            <a-form-item v-bind="formItemLayout" label="创建时间">
              <j-date
                :disabled="true"
                placeholder="请选择创建时间"
                v-decorator="['createTime',{
                  rules: [
                    {
                      required: true,
                      message: '创建时间不能为空',
                    },
                  ],
                }]"
                :trigger-change="true"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :md="24">
            <a-form-item v-bind="formItemLayout2" label="备注">
              <a-textarea placeholder="请输入备注" :rows="4" v-decorator="['beiZhu']" />
            </a-form-item>
          </a-col>
          <a-col :md="24">
            <a-form-item v-bind="formItemLayout2" label="档号格式">
              <a-input placeholder="请选择档号格式" v-model="Gs" />
            </a-form-item>
          </a-col>
          <a-col :md="24">
            <a-transfer
              class="transfer"
              :data-source="mockData"
              show-search
              :filter-option="filterOption"
              :target-keys="targetKeys"
              :render="item => item.title"
              @change="handleChange"
              @search="handleSearch"
            />
          </a-col>
          <a-col :md="24" class="transfer-Se">
            <a-select style="width:50px" @change="GshandleChange">
              <a-select-option value="-">-</a-select-option>
              <a-select-option value="+">+</a-select-option>
            </a-select>
          </a-col>
          <a-col :md="24">
            <div class="antBtn">
              <a-button type="primary" html-type="submit" v-if="selectedKeys.length>0">保存</a-button>
            </div>
          </a-col>
        </a-form>
      </a-row>
    </a-col>
  </a-card>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import moment from 'moment'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import JDate from '@/components/jeecg/JDate'
import JSelectMultiUser from '@/components/jeecgbiz/JSelectMultiUser'
export default {
  name: 'TableList',
  components: {
    JDate,
    JSelectMultiUser,
  },
  data() {
    return {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      formItemLayout2: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 3 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 },
        },
      },
      treeData: [],
      selectedKeys: [],
      Gs: '',
      GsF: '',
      id: '',
      isF: false,
      fj: [],

      // 门类名称
      treeName: [],
      form: this.$form.createForm(this, { name: 'register' }),
      // 传输框
      mockData: [],
      targetKeys: [],
      targetKeysName: [],
    }
  },
  created() {
    this.mlTree()
    this.mlName()
  },
  methods: {
    // 门类树
    mlTree() {
      getAction('/xtMenLei/tree', {}).then((res) => {
        if (res.code == 200) {
          this.treeData = res.result
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 门类名称
    mlName() {
      getAction('/sys/dict/getDictItems/MenLeiMingCheng', {}).then((res) => {
        if (res.code == 0) {
          this.treeName = res.result
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //  树操作
    onSelect(selectedKeys, info) {
      this.Gs = ''
      this.GsF = ''
      this.id = ''
      this.isF = false
      this.targetKeys = []
      this.selectedKeys = selectedKeys
      let Arr2 = []
      // 点击树获取传输数据左侧
      if (selectedKeys.length > 0) {
        getAction(`/xtMenLei/getDangHaoFanWeiByMenLeiID?menLeiId=${selectedKeys}`, {}).then((res) => {
          if (res.code == 200) {
            const data = res.result
            data.forEach((k) => {
              Arr2.push({
                key: k.bianMa,
                title: k.mingCheng,
                description: k.mingCheng,
                chosen: Math.random() * 2 > 1,
              })
            })
            this.mockData = Arr2
            // 点击树获取详情
            getAction(`/xtMenLei/queryById?id=${selectedKeys}`, {}).then((res) => {
              if (res.code == 200) {
                const {
                  form: { setFieldsValue },
                } = this
                const data = res.result
                if (data.shangJi == '0' || data.shangJi == '' || data.shangJi == null) {
                  this.isF = true
                }
                this.id = data.id
                this.GsF = data.beiYong1
                if (data.dangAnGeShi) {
                  const targetKeys = this.getArrEqual(Arr2, data.dangAnGeShi.split(data.beiYong1))
                  const targetKeys2 = this.getArrEqual2(Arr2, data.dangAnGeShi.split(data.beiYong1))
                  this.targetKeys = targetKeys
                  this.Gs = targetKeys2.join(data.beiYong1)
                  this.targetKeysName = targetKeys2
                }
                this.$nextTick(() => {
                  setFieldsValue({
                    mingCheng: data.mingCheng,
                    daiMa: data.daiMa,
                    ciXu: data.ciXu,
                    zhuangTai: data.zhuangTai,
                    createBy: data.createBy,
                    createTime: data.createTime,
                    beiZhu: data.beiZhu,
                    shangJi: data.shangJi,
                  })
                })
              }
            })
          }
        })
      } else {
        this.form.resetFields()
      }
    },
    onChangeTree(value) {
      console.log(value, '门类树')
    },
    // 提交
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          if (this.selectedKeys.length > 0) {
          }
          values.id = this.id
          if (this.targetKeys) {
            values.beiYong1 = this.GsF
            values.beiYong2 = this.Gs
            values.dangAnGeShi = this.targetKeys.join(this.GsF)
          }
          let body = values
          postAction('/xtMenLei/add', { ...body }).then((res) => {
            if (res.code == 200) {
              this.$message.success(res.message)
              this.mlTree()
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    },
    // 新增
    handleReset() {
      this.$router.push({ path: '/menlei-add', query: { fj: this.selectedKeys } })
    },
    // 删除
    handleDe() {
      getAction(`/xtMenLei/delete?id=${this.id}`, {}).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message)
          this.form.resetFields()
          this.selectedKeys = []
          this.mlTree()
        }
      })
    },
    // 传输框
    filterOption(inputValue, option) {
      return option.description.indexOf(inputValue) > -1
    },
    handleChange(targetKeys, direction, moveKeys) {
      const names = this.__getSelectAnt(targetKeys)
      const Arr = []
      names.forEach((i) => {
        Arr.push(i.title)
      })
      this.targetKeys = targetKeys
      this.targetKeysName = Arr
      if (this.GsF) {
        this.Gs = this.targetKeysName.join(this.GsF)
      }
    },
    handleSearch(dir, value) {
      console.log('search:', dir, value)
    },
    // 传输框数组名字
    __getSelectAnt(data) {
      const allDoors = this.mockData
      const doors = []
      for (let i = 0; i < allDoors.length; i++) {
        for (let j = 0; j < data.length; j++) {
          if (data[j] == allDoors[i].key) {
            doors.push(allDoors[i])
          }
        }
      }
      return doors
    },
    getArrEqual(arr1, arr2) {
      let newArr = []
      for (let i = 0; i < arr2.length; i++) {
        for (let j = 0; j < arr1.length; j++) {
          if (arr1[j].key === arr2[i]) {
            newArr.push(arr1[j].key)
          }
        }
      }
      return newArr
    },
    getArrEqual2(arr1, arr2) {
      let newArr = []
      for (let i = 0; i < arr2.length; i++) {
        for (let j = 0; j < arr1.length; j++) {
          if (arr1[j].key === arr2[i]) {
            newArr.push(arr1[j].title)
          }
        }
      }
      return newArr
    },
    // 门类选择
    handleChangeML(value) {
      const {
        form: { setFieldsValue },
      } = this
      this.$nextTick(() => {
        setFieldsValue({
          daiMa: value,
        })
      })
    },
    // 档号格式
    GshandleChange(value) {
      this.GsF = value
      if (this.targetKeys) {
        this.Gs = this.targetKeysName.join(value)
      }
    },
  },
}
</script>

<style lang="less">
.antBtn {
  text-align: right;
  margin: 30px auto 0;
}
.transfer {
  text-align: center;
}
.transfer .ant-transfer-list {
  width: 380px;
  height: 400px;
  text-align: left;
}
.transfer .ant-transfer-operation {
  margin: 0 48px;
}
.transfer-Se {
  text-align: center;
}
.transfer-Se .ant-select {
  position: relative;
  top: -50px;
}
.transfer .ant-transfer-operation .ant-btn-icon-only.ant-btn-sm {
  width: 48px;
  height: 48px;
}
.antAdd {
  font-size: 24px;
  cursor: pointer;
}
.antAdd span:nth-child(2) {
  margin-left: 30px;
}
</style>